<template>
  <div>
    <!-- 使用数据方式1 - 通过 $store -->
    <div>count= {{ $store.state.count }}</div>
    <!-- 使用数据方式2 - 通过计算属性简化模板 -->
    <div>count={{ count }}</div>

    <!-- 调用,mutation 方法1 - 通过$store -->
    <button @click="$store.commit('add')">+1</button>
    <!-- 调用,mutation 方法2 - 通过映射 -->
    <button @click="add">+1</button>

    <!-- 调用,mutation传参 -->

    <button @click="$store.commit('addN',5)">+1</button>
    <!-- 调用,mutation 方法2 - 通过映射 -->
    <button @click="addN(3)">+N</button>

    <!-- 调用actions方法1 -->
    <button @click="$store.dispatch('addSync')">+1 addSync</button>
    <!-- 调用actions方法2 - 通过映射 -->
    <button @click="addSync">1 addSync</button>

    <!-- 调用actions方法1传参 -->
    <button @click="$store.dispatch('addNSync',3)">+1 addSync</button>
    <!-- 调用actions方法2 - 通过映射传参 -->
    <button @click="addNSync(5)">1 addSync</button>

    <!-- 使用模块当中的数据 -->
    <!--  $store.state.模块名,数据名 -->
    <div> token : {{ $store.state.test.token }}</div>
    <!-- 方法不用加模块名,但是会有问题: 默认会调所有的没有加namespaced的模块setToken方法-->
    <!-- <button @click="$store.commit('setToken','hamdulla')">setToken</button> -->
    <!-- 这个方法也报错: 默认不支持模块名调用方法,需要加配置 -->
    <button @click="$store.commit('test/setToken','hamdulla')">setToken</button><br>

    <svg-icon icon-class="eye" class-name="svgColor"></svg-icon>

  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: '',
  components: {},
  props: {
  },
  data() {
    return {

    }
  },

  computed: {
    // count(){
    //   return this.$store.state.count
    // }

    // 通过映射方式批量生成计算属性
    ...mapState(['count', 'age'])
  },
  created() {},
  mounted() {},
  methods: {
    // 先引入mapMutations方法
    ...mapMutations(['add', 'addN']),
    ...mapActions(['addSync', 'addNSync'])
  }
}
</script>

<style lang="scss" scoped>
.svgColor{
  color: yellowgreen;
}
</style>
